import React, { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import instance from "../../api/request";
import { Avatar, List, Input, Button, Modal } from "antd";

function Index() {
  const location = useLocation();
  const { info } = location.state;
  const id = info.id;

  const [infos, setInfos] = useState([]);

  //   发
  const [list, setList] = useState();
  const [huilist, setHuilist] = useState();

  const getData = () => {
    instance.get(`/article/${info.id}`).then((res) => {
      setInfos(res.data.comments);
    });
  };

  useEffect(() => {
    getData();
  }, []);

  //   发送
  const fa = () => {
    instance
      .post("/discuss", {
        userId: 47529555,
        content: list,
        articleId: id,
      })
      .then((res) => {
        setList("");
      });
  };

  const handlists = (e) => {
    setList(e);
  };
  //   对话框
  const [isModalOpen, setIsModalOpen] = useState(false);

  const hui = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    instance.post("/discuss", {
      userId: 47529555,
      content: huilist,
      articleId: id,
    });
    setIsModalOpen(false);
  };
  const handhuilist = (e) => {
    setHuilist(e);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  return (
    <div>
      <h1>{info.title}</h1>
      <p>创始人：皇上</p>
      <p>创建时间：{info.createdAt}</p>
      <p>阅读量：{info.viewCount}</p>
      <p>点赞：18亿</p>
      <p>阅读：17亿</p>
      <p>收藏：16亿</p>
      <div>
        <List
          itemLayout="horizontal"
          dataSource={info.comments}
          renderItem={(item, index) => (
            <List.Item>
              <List.Item.Meta>
                <Avatar
                  src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`}
                />
              </List.Item.Meta>
              <div className="kk">
                <Button onClick={hui}>回复</Button>
                {infos.map((item) => {
                  return (
                    <div>
                      <p>{item.content}</p>
                    </div>
                  );
                })}
              </div>
            </List.Item>
          )}
        />
      </div>

      <div>
        <Input.TextArea
          value={list}
          maxLength={200}
          placeholder="请输入内容"
          onChange={(e) => handlists(e.target.value)}
        />
        <Button onClick={fa}>发送</Button>
        <Modal
          title="评论"
          closable={{ "aria-label": "Custom Close Button" }}
          open={isModalOpen}
          onOk={handleOk}
          onCancel={handleCancel}
        >
          <Input.TextArea
            value={huilist}
            maxLength={200}
            placeholder="请输入内容"
            onChange={(e) => handhuilist(e.target.value)}
          />
        </Modal>
      </div>
    </div>
  );
}

export default Index;
